<template>
  <div class="info">
    <a-space>
      <div class="toolItem" @click="operation(item.id,1)" v-if="showAgree">
        <svg class="icon" aria-hidden="true" :style="svgIcon(item.agreeEd)">
          <use xlink:href="#xueyan-icon-dianzan2"></use>
        </svg>
        <span class="toolTitle">{{ item.agreeNum || 0 }}人赞同</span>
      </div>
      <div class="toolItem" v-if="showComment">
        <svg class="icon" aria-hidden="true" :style="svgIcon(false)">
          <use xlink:href="#xueyan-icon-pinglun"></use>
        </svg>
        <span class="toolTitle">{{ item.commentNum || 0 }}评论</span>
      </div>
      <div class="toolItem" @click="operation(item.id,3)">
        <svg class="icon" aria-hidden="true" :style="svgIcon(item.followEd)">
          <use xlink:href="#xueyan-icon-guanzhu"></use>
        </svg>
        <span class="toolTitle">{{ item.followNum || 0 }}关注</span>
      </div>
      <div class="toolItem" @click="operation(item.id,4)">
        <svg class="icon" aria-hidden="true" :style="svgIcon(item.subscribeEd)">
          <use xlink:href="#xueyan-icon-dingyueguanli"></use>
        </svg>
        <span class="toolTitle">{{ item.subscribeNum || 0 }}订阅</span>
      </div>
      <div class="toolItem" @click="operation(item.id,5)">
        <svg class="icon" aria-hidden="true" :style="svgIcon(item.collectEd)">
          <use xlink:href="#xueyan-icon-shoucang3"></use>
        </svg>
        <span class="toolTitle">{{ item.collectNum || 0 }}收藏</span>
      </div>
      <div class="toolItem" v-if="showSpecies">
        <svg class="icon" aria-hidden="true" style="font-size: 20px">
          <use xlink:href="#xueyan-icon-jinbi"></use>
        </svg>
        <span class="toolTitle">{{ item?.speciesNum || 0 }}金币</span>
      </div>
      <div class="toolItem" @click="operation(item.id,7)" v-if="showParticipate">
        <svg class="icon" aria-hidden="true" :style="svgIcon(item.participateEd)">
          <use xlink:href="#xueyan-icon-wocanjiaderenwu"></use>
        </svg>
        <span class="toolTitle">参加</span>
      </div>
    </a-space>
  </div>
</template>
<script lang="ts" setup>

const emit = defineEmits(['operationItem']);

const props = defineProps({
  item: {
    type: Object,
    default: {}
  },
  showAgree:{
    type: Boolean,
    default: true
  },
  showComment: {
    type: Boolean,
    default: true
  },
  showSpecies: {
    type: Boolean,
    default: false
  },
  showParticipate: {
    type: Boolean,
    default: false
  }
})

function operation(id, operationType) {
  emit("operationItem", id, operationType)
}

function svgIcon(val) {
  if (!!val) {
    return {
      color: 'red',
      fontSize: '16px'
    }
  } else {
    return {
      color: '#8691a3',
      fontSize: '16px'
    }
  }
}
</script>
<style lang="css" scoped>
.info {

}

.toolItem {
  display: flex;
  align-items: center;
}

.toolTitle {
  font-size: 12px;
  margin-left: 5px;
}

</style>
